<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-top:1px solid #1b926c;
        }
         footer{
             color:#fff;
             background-color: #222;
             border-color: #080808;
             padding-top:60px;
             margin-top:100px;
         }
    </style>
</head>
<body>
<div class="row">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">首页</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:void(0)">Link</a></li>
                <li><a href="javascript:void(0)">Link2</a></li>
            </ul>
        </div>
    </nav>
</div>
 <div class="container" ng-app="MyAPP">
     <siteheader></siteheader>
     <h3>自定义指令中的属性require,实现指令间互相通信示例</h3>
     <add minor class="col-md-12">
         <div >次数: {{ count }}</div>
         <br/>
         <figure></figure>
     </add>
     <sitefooter></sitefooter>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>

    /** 示例源自：http://my.oschina.net/u/2342955/blog/411508
     * require为字符串代表另外一个指令的名字。
     * require会将控制器注入到其所指定的指令中，
     * 并作为当前指令的链接函数的第四个参数。
     * 字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。
     * 在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。
     */
    var app=angular.module("MyAPP",[]);
    //增加操作的指令：
    app.directive("add",function(){
        return{
            restrict:'ECMA',
            controller:function($scope){
                $scope.count=0;
                this.addCount=function(){
                    $scope.$apply(function(){
                        $scope.count++;
                    })
                }
            }
        }
    });

    //减少操作的指令：
    app .directive("minor",function(){
        return{
            restrict:'ECAM',
            controller:function($scope){
                this.reduceCount=function(){
                    $scope.$apply(function(){
                        $scope.count--;
                    })
                }

            }
        }
    });

    //主指令：
    app.directive("figure",function(){
        return{
            restrict:'ECMA',
            template:'<button id="add" class="btn btn-default">增加</button>&nbsp;&nbsp;'+
            '<button id="minor" class="btn btn-danger">减少</button>'+
            '<div>{{ figureCtrl.temp }}</div>',
            require:['?^add','?^minor'],
            controller:function(){
                this.temp="这个属性被隔离开，可通过controllerAs创建的动态对象调用";
            },
            controllerAs:'figureCtrl',
            link:function(scope,element,attrs,resultCtrl){
                angular.element(document.querySelector('#minor')).on('click',resultCtrl[1].reduceCount);
                angular.element(document.querySelector('#add')).on('click',resultCtrl[0].addCount);
            }
        }
    });
    /**
     * 注意点：
     1.由于add和minor指令都已被注入resultCtrl数组中，所以想调用它们的控制器中的方法，就可以使用resultCtrl[i].fun()的方式;
     2.更新count的值，但视图是不会改变的，所以需要通过手动$apply()的方式来更新;
     3.controllerAs实际上是把controller创建为一个对象，并且是隔离的。
     *
     */



    //公共区域，页头和页脚
    app.directive('siteheader',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/header.html"
        }
    });
    app.directive('sitefooter',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/footer.html"
        }
    });
</script>